/**
 * 自定义搜索导航条
 */
<template>
	<u-navbar :is-back="isBack" height="50" :border-bottom="false">
		<view class="pr-2 fullwidth" :class="{'pl-0': isBack, 'pl-2': !isBack,'fa-nav-search': navCenter}">
			<u-search
				height="80"
				v-model="keyword"
				shape="square"
				:placeholder="placeholder"
				action-text="取消"
				bg-color="#ffffff"
				:show-action="showSearch"
				:clearabled="false"
				:input-align="align"
				:search-icon-color="iconColor"
				color="#2A2A2A"
				border-color="#BCC7D8"
				@focus="focusNavSearch"
				@blur="blurNavSearch"
				@change="searchData"
				@custom="cancelSearch"
			></u-search>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String
			},
			showBack: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isBack: true,
				showSearch: false,
				keyword: '',
				navCenter: true,
				align: 'center',
				iconColor: '#999999'
			}
		},
		created() {
			if (this.showBack) {
				this.isBack = true
			} else {
				this.isBack = false
			}
		},
		methods: {
			searchData(e) {
				if (this.keyword == '') {
					this.$emit('methods', this.keyword)
				} else {
					// 清除前后空格
					this.keyword = this.keyword.replace(/(^\s*)|(\s*$)/g, ''); // 去前后空格
					if (this.keyword == "") return
					this.$emit('methods', this.keyword)
				}
			},
			
			cancelSearch(e) {
				if(this.keyword) {
					this.keyword = '';
					this.showSearch = false;
					// this.isBack = true;
					this.showBack ? this.isBack = true : null;
					this.align = 'center';
					this.navCenter = true;
					this.iconColor = '#999999';
				}
			},
			
			focusNavSearch() {
				this.showSearch = true;
				this.showBack ? this.isBack = false : null;
				this.align = 'left';
				this.navCenter = false ;
				this.iconColor = '#2A2A2A';
			},
			
			blurNavSearch() {
				if (this.keyword == '') {
					this.showSearch = false;
					this.showBack ? this.isBack = true : null;
					this.align = 'center';
					this.navCenter = true;
					this.iconColor = '#999999';
				}
			},
			reset() {
				this.keyword = "";
				// this.searchData();
			}
		}
	}
</script>

<style lang="scss">
	
</style>
